<template>
  <div>
    <nav-bar title="搜索结果" />
    <main>
      <van-loading
        v-if="isShow"
        class="loading"
        type="spinner"
        color="#1989fa"
      />
      <van-empty
        v-else-if="!SET_SEARCHRESULT_LIST"
        image="error"
        description="请求错误"
      />
      <van-empty
        v-else-if="!SET_SEARCHRESULT_LIST.length"
        description="暂无数据"
      />
      <article-list
        v-else
        :data="searchResult"
      />
    </main>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'SearchResult',
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    ...mapState('search', [
      'searchResult'
    ])
  },
  methods: {
    ...mapActions('search', [
      'updateSearchResult'
    ]),
    ...mapMutations('search', [
      'SET_SEARCHRESULT_LIST'
    ])
  },
  async created() {
    await this.updateSearchResult(this.$route.query.q)
    this.isShow = false
  },
  beforeDestroy() {
    this.SET_SEARCHRESULT_LIST([]);
  },
}
</script>

<style lang="less" scoped>
main {
  height: calc(100vh - 46px);
  overflow: auto;
  .loading {
    display: flex;
    justify-content: center;
    margin: 50px;
  }
}
</style>
